<!DOCTYPE html>
<lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>通用查询</title>
  <link rel="stylesheet" type="text/css" href="../../../../css/generalquery.css">
  <link rel="stylesheet" href="../../../../css/element.css">
</head>
<body>
  <div id="queryview" class="querywarp">
    <span>
  <a href="#">资产管理</a>
  <a>></a>
  <a href="#">资产入库</a>
  </span>
  <div class="box">
    <div class="colbox">
      <span class="inputspan">
        <h4 style="display: inline-block;">名称:</h4>
        <input class="name" type="text" v-model.lazy="model_name">
      </span>
      <span class="inputspan">
        <h4 style="display: inline-block;">RFID:</h4>
        <input type="text" v-model.lazy="model_rfid">
      </span>
      <span class="selectspan">
        <h4 style="display: inline-block;">单位:</h4>
        <select v-model="model_unit">
          <option value="0">全选</option>
        </select>
      </span>
      <span class="selectspan">
        <h4 style="display: inline-block;">状态:</h4>
        <select v-model="model_status">
          <option value="0">全选</option>
        </select>
      </span>
      <span class="selectspan">
        <h4 style="display: inline-block;">维保状态:</h4>
        <select v-model="model_ms">
          <option value="0">全选</option>
        </select>
      </span>
      <span class="inputspan">
        <h4 style="display: inline-block;">管理员:</h4>
        <input type="text"  v-model.lazy="model_admin">
      </span>
      <span class="inputspan">
        <h4 style="display: inline-block;">使用人:</h4>
        <input type="text"  v-model.lazy="model_user"> 
      </span>
      <span class="findspan">
        <button @click="research">查询</button>
      </span>
  </div>
  </div>
  <div id="tabview">
    <el-table v-loading="loading" :data="rows" border :key="updatakey">
      <el-table-column label="编号"  prop="num" min-width="20" align="center"></el-table-column>
      <el-table-column label="资产名称"  prop="name"  align="center"></el-table-column>
      <el-table-column label="价格"  prop="price" min-width="20" align="center"></el-table-column>
      <el-table-column label="单位"  prop="unit"  align="center"></el-table-column>
      <el-table-column label="部门"  prop="department"   align="center"></el-table-column>
      <el-table-column label="状态"  prop="status"   align="center"></el-table-column>
      <el-table-column label="维保状态"  prop="Maintenancestatus"   align="center"></el-table-column>
      <el-table-column label="维保期限"  prop="Maintenancetime"  align="center"></el-table-column>
      <el-table-column label="管理员"  prop="admin"   align="center"></el-table-column>
      <el-table-column label="使用人"  prop="user"  align="center"></el-table-column>
      <el-table-column label="操作"  prop="operating"  min-width="40" align="center">
          <template slot-scope="scope">
            <el-link size="mini" @click="editRow(scope.$index)">修改</el-link>
            <el-link size="mini" @click="deleteRow(scope.$index)">删除</el-link>
          </template>
        </el-table-column>
  </el-table>
  <div style="text-align: center;margin-top: 30px;">
    <el-pagination
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="pageSize"
    layout="total,prev, pager, next, jumper"
    :total=planList.length>
    </el-pagination>
  </div>
  </div>

  </div>
</body>
<!-- <script src="../../../../json/userdata.js"></script> -->
<script src="../../../../js/Vue.js"></script>
<script src="../../../../js/element.js"></script>
<script src="../../../../js/axios.js"></script>
<script src="../../../../js/Qs.js"></script>
<script src="../../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../../js/layer.js"></script>
<script>
  var vue= new Vue({
    axios,
   el: '#queryview',
   data(){
     return{ 
      message: 'Hello Vue!',
      model_name:'',
      model_rfid:'',
      model_unit:0,
      model_status:0,
      model_ms:0,
      model_admin:'',
      model_user:'',
      total:20,
      currentPage: 1,
                pageSize: 5,
                //查询表单
                searchForm: {
                    name: '',
                    time: undefined,
                    page:1,
                    size:2,
                },
                planList:['1','2','3','4','5','6','7'],
                formLabelWidth: '120px',
                updatakey:false,
                  rows:[
                  {
                      num:'1',
                      name:'资产名称1',
                      price:'8.00',
                      unit:'单位1',
                      department:"部门1",
                      status:"状态1",
                      Maintenancestatus:"维保1",
                      Maintenancetime:"维保期限1",
                      admin:"管理员1",
                      user:"用户1",
                      operating:"操作",
                  },{
                    num:'2',
                      name:'资产名称2',
                      price:'8.00',
                      unit:'单位2',
                      department:"部门2",
                      status:"状态2",
                      Maintenancestatus:"维保2",
                      Maintenancetime:"维保期限2",
                      admin:"管理员2",
                      user:"用户2",
                      operating:"操作",
                  },{
                      num:'3',
                      name:'资产名称3',
                      price:'8.00',
                      unit:'单位3',
                      department:"部门3",
                      status:"状态3",
                      Maintenancestatus:"维保3",
                      Maintenancetime:"维保期限3",
                      admin:"管理员3",
                      user:"用户3",
                      operating:"操作",
                  }
              ]
              ,                  rows2:[
                  {
                      num:'第二页1',
                      name:'资产名称1',
                      price:'8.00',
                      unit:'单位1',
                      department:"部门1",
                      status:"状态1",
                      Maintenancestatus:"维保1",
                      Maintenancetime:"维保期限1",
                      admin:"管理员1",
                      user:"用户1",
                      operating:"操作",
                  },{
                    num:'第二页2',
                      name:'资产名称2',
                      price:'8.00',
                      unit:'单位2',
                      department:"部门2",
                      status:"状态2",
                      Maintenancestatus:"维保2",
                      Maintenancetime:"维保期限2",
                      admin:"管理员2",
                      user:"用户2",
                      operating:"操作",
                  },{
                      num:'第二页3',
                      name:'资产名称3',
                      price:'8.00',
                      unit:'单位3',
                      department:"部门3",
                      status:"状态3",
                      Maintenancestatus:"维保3",
                      Maintenancetime:"维保期限3",
                      admin:"管理员3",
                      user:"用户3",
                      operating:"操作",
                  }
              ],
              rows1:[
                  {
                      num:'第一页1',
                      name:'资产名称1',
                      price:'8.00',
                      unit:'单位1',
                      department:"部门1",
                      status:"状态1",
                      Maintenancestatus:"维保1",
                      Maintenancetime:"维保期限1",
                      admin:"管理员1",
                      user:"用户1",
                      operating:"操作",
                  },{
                    num:'第一页12',
                      name:'资产名称2',
                      price:'8.00',
                      unit:'单位2',
                      department:"部门2",
                      status:"状态2",
                      Maintenancestatus:"维保2",
                      Maintenancetime:"维保期限2",
                      admin:"管理员2",
                      user:"用户2",
                      operating:"操作",
                  },{
                      num:'第一页3',
                      name:'资产名称3',
                      price:'8.00',
                      unit:'单位3',
                      department:"部门3",
                      status:"状态3",
                      Maintenancestatus:"维保3",
                      Maintenancetime:"维保期限3",
                      admin:"管理员3",
                      user:"用户3",
                      operating:"操作",
                  }
              ]
            
    }
 },
 methods:
 {
  research: function() {
    //获取所有查询条件的值
    //console.log(this.model_name,this.model_rfid,this.model_admin,this.model_user,this.model_status);
    this.getJsonData();
  },
  deleteRow(row){
          console.log('deleterow:'+'index:'+row);
          //this.data.splice(row, 1);
          },
  editRow(row){
          console.log('editRow:'+'index:'+row);
            },
  formatValue:function(value){
        	  var temp = '<p style="font-size:20px;text-align:center; text-align:justify;margin:5% 5%;">@value</p>'; 
        	  return temp.replace(/@value/,value);
          },
  handleCurrentChange(val) {
                this.currentPage = val;
                if(val==2)
                {
                  this.rows = this.rows2;
                  this.updatakey=!this.updatakey;
                }
                else if(val==1)
                {
                  this.rows = this.rows1;
                  this.updatakey=!this.updatakey;
                }
                console.log('pagechage:'+val);
            },
  getJsonData() {
    // var url = '../../../../json/userdata.js';
    //     		axios.get(url).then(res=>{
    //                 if(res.data.success){
    //                  console.log(res);
    //                 }
    //             }).catch(err=>{
    //                 console.log(err);
    //             })
    // const newInstance = this.$ajax.create({
    //                     baseURL: '',
    //                     timeout: 5000,
    //                     headers: {'Content-type': 'multipart/form-data'}
    //                 });
    //                 /*../../请根据自己的实际路径来获取*/
    //                 newInstance.get('../../../../json/userdata.js').then(res => {
    //                     console.log("获取本地的json文件" + JSON.stringify(res));
    //                 })
      //    $.get('../../../../json/userdata.js').then((response) => {
      //    // console.log(typeof(response));//取出的一样是个STRING

      // });
    axios.get('../../../../json/userdata.js').then(res=>{
                    //console.log(typeof(res.data));
                    //取string转json对象
                    let rows1=eval('(' + res.data + ')');;
                    

                    //console.log(typeof(rows1));
                   this.planList=rows1.planlist;
                   //this.pageSize=rows1.page-size;
                   this.rows=rows1.data;
                   //刷新表格
                    this.updatakey=!this.updatakey;
                   //console.log(rows,this.updatakey);
                  
                 
                    //let jsdata1 = JSON.parse(res.data);
                    //console.log(typeof(jsdata1));
                  if(rows1.code==200)
                  {
                    console.log("sucess");
                  }
                  //console.log(res.data.code);
                }).catch(err=>{
                    //console.log(res);
                })
   },
  },

  computed:
  {
   
  },
  watch:
  {
    planList: {
      handler: function (val, oldVal) { console.log('newlength: %s, oldlength: %s', val.length, oldVal.length)
    },
      deep: true
    },
  }


});

 
</script>
</html>